<template>
  <div ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, shallowRef, onMounted, onUnmounted, watchEffect } from "vue";
import { pxToRem } from "@/utils/index";
const seriesData = ref();
// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
});

seriesData.value = props.housingSupplyStatsData.seriesData;
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");

// echarts初始化渲染
const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "line",
          lineStyle: {
            color: "rgba(40,252,255,0.6)",
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.9)",
          },
        },
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(18),
        },
        backgroundColor: "rgba(8, 64, 132, 0.9)",
      },
      legend: {
        show: false,
        textStyle: {
          color: "#",
          fontSize: 11,
        },
      },
      grid: {
        left: "",
        right: "3%",
        bottom: "10%",
        top: "30%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: true,
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#FFFFFF",
            fontSize: pxToRem(12),
          },
        },
      },
      yAxis: [
        {
          type: "value",
          name: "人数",
          boundaryGap: [0, "30%"],
          // 标题名称颜色
          nameTextStyle: {
            color: "#959699",
            fontSize: pxToRem(12),
          },
          splitLine: {
            lineStyle: {
              color: "#31679C",
              type: "dashed",
            },
          },
          axisLabel: {
            formatter: "{value}",
            color: "#959699", // 文本颜色
            fontSize: pxToRem(12),
          },
        },
      ],
      visualMap: {
        type: "piecewise",
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: [
          {
            gt: 0,
            lt: 1,
            color: "#E55151",
          },
          {
            gt: 1,
            lt: 2,
            color: "#E4871D",
          },
          {
            gt: 2,
            lt: 3,
            color: "#F0C34B",
          },
          {
            gt: 3,
            lt: 4,
            color: "#E5FC64",
          },
        ],
      },
      series: [
        {
          type: "line",
          symbol: "none",
          lineStyle: {
            color: "#5470C6",
            width: 0,
          },
          areaStyle: {},
          data: seriesData.value,
        },
      ],
    };
    myChart.value.setOption(option);
  }
};

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  seriesData.value = props.housingSupplyStatsData.seriesData;
  getEchart();
};

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
